﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/js/index.min.css"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/vue.min.js"></script>
    <script src="/js/index.min.js"></script>
</head>
<body>
<div id="app">
    <h3 style="text-align: center">账单管理</h3>
    <table border="1" style="margin:auto; width:450px;">
        <tr>
            <th>订单号</th>
            <th>费用</th>
            <th>周期</th>
            <th>产生日期</th>
            <th>状态</th>
        </tr>
        <tr v-for='item in planList'>
            <td>{{item.orderId}}</td>
            <td>{{item.amount}}</td>
            <td>{{item.period}}个月</td>
            <td>{{item.createtime}}</td>
            <td>{{item.state?'未还清':'已还清'}}</td>
        </tr>
    </table>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            planList:[]
        },
        mounted() {
            $.post("/credits",  function (d){
                app.planList = d;
            })
        }
    });
</script>
</body>
</html>